表單指的是一些可以向網站訪客收集資訊的不同元素，例如簡單的搜尋框，到較複雜的申請表單等等。

表單控制項

以下是幾種常用到的表單控制項:

加入文字

• 文字輸入欄(單行):用來輸入單行文字，例如E-mail或姓名。
• 密碼輸入:會遮蔽輸入字元的文字輸入欄
• 文字區塊(多行):可輸入較多文字，用來回復訊息或回應等等。

進行選擇

• 單選鈕:讓使用者選擇單一選項。
• 勾選框:使用者可以勾選或取消一個或多個選項。
• 下拉選單:使用者必須從清單中選取其中一個選項。

送出按鈕

• 送出按鈕:從表單送出資料。
• 影像按鈕:同送出按鈕，但允許使用影像作為按鈕。

上傳檔案

• 檔案上傳:允許用戶上傳檔案到網站上。

表單結構

• <form>:
  表單控制項位在此標籤內，此標籤都會帶有action屬性，通常也都會有method以及id屬性。

• action:
  放在form標籤內，他的值為接收資料的PHP程式位置。

• method:
  表單可透過這兩種方法之一來送出:get或post，如果無指定method屬性，則預設為使用get方式傳送。

  get:
  使用get方法時，表單的值會被加到action屬性所指定的URL尾端，所以並不適合用在需要保密的資料。

  post:
  使用post方法，表單的值會由HTTP標頭傳送(HTTP Request)，如果表單是允許上傳檔案、表單長度較長、包含敏感資料、要將資料加到資料庫或從資料庫刪除等，都應該要使用post方法。

• id屬性:

  id屬性的作用是在頁面的標籤中，將需要辨識的標籤獨立辨識，值必須以字母或下滑線作開頭，不能使用數字或是其他字元，同一個頁面上的兩個標籤也不能有相同的id屬性值。

  id屬性也可使用Javascript與該特定標籤互動，此屬性為全域屬性，可使用在任何標籤上，以後的文章會對id屬性有更多的舉例與說明。

• <input>:
  此標籤的用途是製作不同的表單控制項，type屬性的值決定了該表單的輸入類型。

文字及密碼輸入

• type="text"
  此屬性會製作單行的文字輸入框。

• type="password"
  此屬性會製作一個單行文字框，但是輸入的內容會被遮蔽。註:遮蔽並不代表加密，若是敏感資料則需要設定伺服器使用安全通訊層端(SSL)。

• name屬性:
  每個表單都需要有此屬性。當在表單輸入資料，伺服器用來識別輸入到哪個表單控制項中的屬性名稱。
  用法:name=該表單控制項的名稱

• maxlength:
  此屬性是用來限制文字欄位輸入的字數，其值就是可輸入的字元數。

• <textarea>:
  此標籤是用來製作多行文字輸入區，它並非為空白元素，所以需要結束標記</textarea>，長寬應該要使用CSS去控制寬度及高度，但在舊的原始碼內也可看到cols(寬度)和rows屬性(垂直)，以字元數測量。

• placeholder:
  在任何文字輸入欄都可使用這個屬性，他的值是顯示在欄位中的文字，使用者點擊欄位就會消失。

單選、多選及勾選

• type="radio"
  此屬性為單選鈕，只允許使用者在選項中選擇單一項目。

• type="checkbox"
  此屬性為勾選框，可讓數用者選取或取消選取一個或多個的選項。

• name屬性:
  伺服器用來識別輸入到哪個表單控制項中的屬性名稱，當一個問題是使用單選鈕作選擇時，該問題的所有單選答案的name屬性值必須相同。

• value屬性:
  此屬性標明了該選項要傳送到伺服器的值，同一個問題中不同的單選鈕都應該要有相對應的值，伺服器以這裡的值來判斷使用者選擇哪種選項。

• checked:
  此屬性用來表示當頁面載入時，應該預先選好的值。這個屬性的值為checked，同一組中只能有一個單選鈕使用此屬性。

下拉選單欄位與多重選擇區塊

下拉式選單的功能與單選鈕相似，下拉式選單比較適合用在較多選項的情況。

• <select>:
  此標籤為下拉選單(選取方框)，可讓使用者從下拉選單選取一個選項，裡面一樣要有name屬性來回傳到伺服器。

• <option>:
  此標籤是用來指定下拉選單內的選項，裡面會使用value屬性標明了該選項要傳送到伺服器的值。

• selected:
  此屬性用來表示頁面載入完成後的預設值，這個屬性的值為selected。

  若要使用多重選擇區塊，可使用以下方法

• size:
  在<select>內加入此屬性，可將下拉選單轉變成區塊，一次顯示多個選項，這個屬性的值為顯示出來的選項數目。

• multiple:
  在<select>內加入此屬性並將值設為multiple，就可以讓使用者一次選取多重選項。

  註:PC按住ctrl，Mac使用command即可多重選取。

檔案輸入區塊

• type="file"
  此屬性會製作一個欄位，後面跟著一個瀏覽(browse)，瀏覽按鈕點擊後會出現視窗讓使用者選取檔案上傳。

  <form>標籤的method屬性必須使用post值才能上傳檔案。

送出按鈕

• type="submit"
  此屬性的用途是用來將表單傳送到伺服器，它可以使用name屬性，但不一定要使用。

• value:此屬性是用來控制出現在按鈕上的文字。

  註:按鈕外觀也可使用css或影像來製作。

影像按鈕

• type="image"
  這個屬性可以使用影像當作送出按鈕 後面要加上影像位置，也可指定width、height以及alt:

  例如:<input type="image" src="檔案位置" width="長度" height="高度">

按鈕標籤與隱藏控制項

• <button>:
  此標籤的用意是要讓使用者控制按鈕外觀，可以使用其他標籤來製作按鈕，也可結合文字與影像。

• type="hidden"
  此屬性為隱藏欄位，用來儲存表單資訊等等，不會直接顯示在表單上，通常會有name和value兩個參數，它們分別代表欄位名稱與欄位的值

表單控制項的標題

• <label>:
  這個標籤是用來表示輸入欄位的標籤，可將表單欄位加上說明標題，以及將表單的可點區域放大，讓使用者更好去點選選項。

  <label>標籤有兩種用法

  1. 將文字敘述和表單輸入欄位包圍在一起，例如:

  <label>年紀: <input type="text" name="age" /></label>
  

  2. 獨立在表單外，使用for屬性與id屬性來控制相對應的表單選項，for屬性放在<label>標籤內，id屬性則放在<input>內。

  例如:

  <input id="male" type="radio" name="sex" value="m">
  <label for="male">男</lable>
  <input id="female" type="radio" name="sex" value="f">
  <label for="male">女</lable>
  

  獨立表單外的使用要注意，程式碼的順序就是網頁所呈現出的順序。